<template>
  <div class="my-body">
    <el-row>
      <el-col :span="24">
        <div class="ipt_a">
          <div style="float: left; line-height: 30px" class="tab_font-size">
            医院地区：
          </div>
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 150px; height: 50px; float: left"
          ></el-input>
        </div>
        <div class="ipt_a">
          <div style="float: left; line-height: 30px" class="tab_font-size">
            产品规格：
          </div>
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 150px; height: 50px; float: left"
          ></el-input>
        </div>
        <div class="ipt_a">
          <div style="float: left; line-height: 30px" class="tab_font-size">
            序列号：
          </div>
          <el-input
            v-model="input"
            placeholder="请输入内容"
            style="width: 150px; height: 50px; float: left"
          ></el-input>
        </div>
        <div class="ipt_b">
          <div style="float: left; line-height: 30px" class="tab_font-size">
            收货时间：
          </div>
          <div class="block">
            <el-date-picker
              v-model="value1"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
            >
            </el-date-picker>
          </div>
        </div>
        <div class="ipt_a">
          <div style="float: left; line-height: 30px" class="tab_font-size">
            订单类型：
          </div>
          <el-select v-model="value" placeholder="请选择" style="width: 150px">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </div>
        <div style="float: left">
          <el-button type="primary" plain>查询</el-button>
          <el-button plain>清空</el-button>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="my-table-tools">
          <div class="my-table-tools-left">
            <el-button type="primary" size="small" icon="el-icon-plus" plain
              >新增</el-button
            >
            <el-button type="danger" size="small" icon="el-icon-delete" plain
              >删除</el-button
            >
          </div>
          <div class="my-table-tools-right">
            <el-button icon="el-icon-refresh" circle plain @click="refresh" />
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="my-table-body">
          <el-table
            v-loading="loading"
            border
            :data="tableData"
            style="width: 100%"
            fit
            size="medium"
            cell-style="padding: 5px 0"
            header-cell-style="padding: 7px 0;background:#f5f7fa"
          >
            <el-table-column fixed prop="bianhao" label="订货申请编号">
            </el-table-column>
            <el-table-column prop="senddate" label="订单类型">
            </el-table-column>
            <el-table-column prop="enddate" label="收货日期"> </el-table-column>
            <el-table-column prop="name" label="医院地区"> </el-table-column>
            <el-table-column prop="province" label="产品条码">
            </el-table-column>
            <el-table-column prop="address" label="产品规格编码">
            </el-table-column>
            <el-table-column prop="shouqfang" label="产品序列号">
            </el-table-column>
            <el-table-column prop="jingxiaos" label="库存状态">
            </el-table-column>
            <el-table-column prop="peisonf" label="备注"> </el-table-column>

            <el-table-column fixed="right" label="授权证书" width="100">
              <template slot-scope="scope">
                <el-button
                  size="mini"
                  @click="handleEdit(scope.$index, scope.row)"
                  >下载</el-button
                >
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="my-table-pagination">
          <el-pagination
            background
            :current-page="currentPage4"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="100"
            layout="->, total, sizes, prev, pager, next, jumper"
            :total="400"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  data() {
    return {
      key: 1, // 为了能每次切换权限的时候重新初始化指令
      options: [
        {
          value: "1",
          label: "全部",
        },
        {
          value: "2",
          label: "一般订单",
        },
        {
          value: "3",
          label: "积分订单",
        },
        {
          value: "3",
          label: "样品订单",
        },
        {
          value: "3",
          label: "换货订单",
        },
      ],
      value: "",
      tableData: [
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
        {
          bianhao: "PS074107742412L",
          senddate: "2024-05-02",
          enddate: "2024-12-31",
          name: "左心耳",
          province: "完成授权",
          city: "普陀区",
          address: "苏州市中心医院",
          shouqfang: "鹰潭市方园医药有限公司",
          jingxiaos: "鹰潭市方园医药有限公司",
          peisonf: "鹰潭市方园医药有限公司",
          shouqyy: "入院",
          shangcaizhibiao: 3,
        },
      ],
    };
  },
  methods: {
    handleClick(row) {
      console.log(row);
    },
  },
};
</script>

<style lang="scss" scoped>
.ipt_a {
  width: 250px;
  height: 50px;
  float: left;
}

.ipt_b {
  width: 450px;
  height: 50px;
  float: left;
}
</style>